<template>
  <div>
    <el-button @click="openDrawer">打开抽屉</el-button>

    <PlutoDrawer
      :visible.sync="drawerVisible"
      :config="drawerConfig"
      :confirm-loading="confirmLoading"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @visible-change="handleVisibleChange"
    >
      <!-- 自定义内容插槽 -->
      <template v-slot:content>
        <div class="content-container">
          <div class="left-content-container">
            <h3 class="section-title">基本信息</h3>
            <div class="form-group">
              <label class="form-label">姓名</label>
              <el-input v-model="form.name" placeholder="请输入姓名" class="form-input"></el-input>
            </div>
            <div class="form-group">
              <label class="form-label">年龄</label>
              <el-input v-model="form.age" placeholder="请输入年龄" class="form-input"></el-input>
            </div>
            <div class="form-group">
              <label class="form-label">邮箱</label>
              <el-input v-model="form.email" placeholder="请输入邮箱" class="form-input"></el-input>
            </div>
            <div class="form-group">
              <label class="form-label">电话</label>
              <el-input v-model="form.phone" placeholder="请输入电话" class="form-input"></el-input>
            </div>
          </div>
          <div class="right-content-container">
            <!-- 上：步骤条 - 文字在图标右边 -->
            <div class="custom-steps-container">
              <el-steps :active="2" align-center finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="关联文书"></el-step>
                <el-step title="完成"></el-step>
              </el-steps>
            </div>

            <!-- 中：标签页 -->
            <div class="middle-section">
              <PlutoTabs
                :tabs="tabConfig"
                :default-active="activeTab"
                @tab-change="handleTabChange"
                :a4-height="640"
              ref="plutoTabs"
              />
            </div>

          </div>
        </div>
      </template>
    </PlutoDrawer>
  </div>
</template>

<script>
import PlutoDrawer from '@/components/PlutoDrawer/PlutoDrawer.vue'
import PlutoTabs from "@/components/PlutoTabs/PlutoTabs.vue";

export default {
  components: {
    PlutoTabs,
    PlutoDrawer
  },
  data() {
    return {
      drawerVisible: false,
      confirmLoading: false,
      active: 0,
      drawerConfig: {
        title: '用户信息编辑',
        size: '100%',
        contentHeight: 'auto',
        cancelText: '取消',
        confirmText: '保存',
        confirmButtonType: 'primary',
        wrapperClosable: false
      },
      form: {
        name: '',
        age: '',
        email: '',
        phone: ''
      },
      config: {
        autoSave: true,
        notifications: false
      },
      permission: {
        level: 'read'
      },
      currentTime: '',

      activeTab: 'approval',
      tabConfig: [
        {
          id: 'approval',
          title: '有关事项审批表'
        },
        {
          id: 'punishment',
          title: '行政处罚事先告知书'
        },
        {
          id: 'other',
          title: '其他文书'
        }
      ]
    }
  },
  mounted() {
    this.updateTime();
  },
  methods: {
    handleTabChange(tabId) {
      console.log('切换到tab:', tabId);
      let  htmlContent = ``;
      switch(tabId) {
        case 'approval':
          htmlContent = `
              <h4>有关事项审批表</h4>
            `;
          break;
        case 'punishment':
          htmlContent = `
              <h4>行政处罚事先告知书</h4>
            `;
          break;

        case 'other':
          htmlContent = `

            <!-- 下：A4区域 -->
            <div class="bottom-section">
              <div class="a4-preview">
                <div class="a4-content">
                  <h4>信息预览报告</h4>
                  <div class="preview-item">
                    <span class="label">提交时间:</span>
                    <span class="value">{{ currentTime }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div><div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>

                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">当前步骤:</span>
                    <span class="value">步骤 {{ active + 1 }}</span>
                  </div>


                  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">{{ form.name ? form.name : '待完善' }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">配置状态:</span>
                    <span class="value">{{ config.autoSave ? '已配置' : '未配置' }}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">权限级别:</span>
                    <span class="value">{{ permission.level }}</span>
                  </div>
                </div>
              </div>
            </div>
            `;
          break;
      }
      // 设置tab内容
      this.$refs.plutoTabs.setTabContent(tabId, htmlContent);
    },


    openDrawer() {
      this.drawerVisible = true
      this.updateTime();
    },

    next() {
      if (this.active++ > 2) this.active = 0
    },

    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleString('zh-CN');
    },

    handleConfirm() {
      this.confirmLoading = true
      // 模拟异步操作
      setTimeout(() => {
        this.confirmLoading = false
        this.drawerVisible = false
        this.$message.success('保存成功')
      }, 1000)
    },

    handleCancel() {
      this.drawerVisible = false
      this.$message.info('已取消')
    },

    handleVisibleChange(visible) {
      console.log('抽屉显示状态:', visible)
    }
  }
}
</script>

<style scoped>
.content-container {
  display: flex;
  height: 100%;
  min-height: 400px;
}

.left-content-container,
.right-content-container {

  padding: 15px 20px;
  overflow-y: auto;
  border-radius: 4px;
}

.left-content-container {
  flex: 1;
  border-right: 1px solid #e8e8e8;
  background-color: #FFFFFF;
  margin-right: 15px;
}

.right-content-container {

  width: 750px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0; /* 重要：允许内容收缩 */
}

/* 自定义步骤条样式 - 文字在图标右边 */
.custom-steps-container {
  color: #409EFF;
}

.custom-steps-container :deep(.el-step) {
  display: flex;
  align-items: center;
}

.custom-steps-container :deep(.el-step__main) {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: 8px;
}

.custom-steps-container :deep(.el-step__icon) {
  margin-right: 8px;
  flex-shrink: 0;
}

.custom-steps-container :deep(.el-step__title) {
  margin-right: 0;
  line-height: 1;
  font-size: 14px;
}

.custom-steps-container :deep(.el-step__line) {
  top: 50%;
  transform: translateY(-50%);
}

.custom-steps-container :deep(.el-step__head) {
  flex-direction: row;
  align-items: center;
}

.custom-steps-container :deep(.el-step__description) {
  display: none;
}

/* 中：标签页区域 */
.middle-section {
  flex: 0 0 auto; /* 固定高度，不伸缩 */
}

/* 下：A4区域 - 修复滚动问题 */
.bottom-section {
   display: flex;
  flex-direction: column;
  min-height: 0; /* 重要：允许内容收缩 */
  overflow: hidden; /* 隐藏外层滚动 */
  height: 200px; /* 固定高度 */

}

.a4-preview {
  flex: 1;
  border: 1px solid #ddd;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 重要：允许内容收缩 */
  overflow: hidden; /* 隐藏中间层滚动 */
}

.a4-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto; /* 只在内容层滚动 */
  min-height: 0; /* 重要：允许内容收缩 */
  max-height: 100%; /* 限制最大高度 */
}

.a4-content h4 {
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.preview-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.preview-item .label {
  font-weight: 500;
  color: #666;
}

.preview-item .value {
  color: #333;
}

.section-title {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
  font-size: 18px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-input {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .left-content-container,
  .right-content-container {
    width: 100%;
    flex: none;
  }

  .left-content-container {
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .right-content-container {
    gap: 15px;
  }

  .bottom-section {
    height: 300px; /* 移动端固定高度 */
  }

  /* 移动端步骤条调整 */
  .custom-steps-container :deep(.el-step__main) {
    margin-left: 4px;
  }

  .custom-steps-container :deep(.el-step__title) {
    font-size: 12px;
  }
}
</style>
